<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一目了然</title>
<link rel="stylesheet" href="<?php echo META_URL; ?>/style/main.css" />
<link rel="stylesheet" href="<?php echo META_URL; ?>/style/dashboard.css" />
<link rel="stylesheet" type="text/css" hrf="<?php echo META_URL; ?>/style/jquery.jqplot.min.css" />
<script type="text/javascript" src="<?php echo META_URL; ?>/js/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo META_URL; ?>/js/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="<?php echo META_URL; ?>/js/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="<?php echo META_URL; ?>/js/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
</head>
<body>
<?php include 'header.php';?>
<?php include 'mainnav.php';?>
<div class="main">
<div>
	<div class="mainleft">
		<div class="wiget">
			<div class="wiget-head">
				<h4>Electricity Charge</h3>
					<span class="toggle-height">+</span>
					<span class="remove-wiget">x</span>
			</div>
			<div class="wiget-content wiget-content-top">
				<div class="diagram" id="chart1" style="height: 100px;"></div>
			</div>
			<div class="wiget-minimisable" collapsed="1" style="">
				<div class="wiget-content">
					<ul class="wiget-tab">
						<li class="active">
							<span>电表记录</span>
						</li>
						<li>
							<span>缴费记录</span>
						</li>
					</ul>
					<div class="wiget-switchable">
						<ul class="wiget-list">
							<li>
								<p><label>2012-02-29：</label>20003.1231</p>
							</li>
							<li>
								<p><label>2012-03-15：</label>20003.1231</p>
							</li>
							<li class="wiget-list-add-line">
								<p><label><input type="text" class="text" value="<?php echo date('Y-m-d') ?>"/>：</label><input type="text" class="text" value="电费" />&nbsp;&nbsp;&nbsp;<span class="add-button">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></p>
							</li>
						</ul>
						<ul class="wiget-list" style="display: none;">
							<li>
								<p><label>2012-02-29：</label>123</p>
							</li>
							<li>
								<p><label>2012-03-15：</label>123</p>
							</li>
							<li class="wiget-list-add-line">
								<p><label><input type="text" class="text" value="日期"/>：</label><input type="text" class="text" value="缴费" />&nbsp;&nbsp;&nbsp;<span class="add-button">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></p>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="mainright">
		<div class="wiget">
			<div class="wiget-head"><h4>Fee</h3></div>
			<div class="wiget-content" style="height: 50px;">

			</div>
		</div>
	</div>
</div>
</div>
<?php include 'footer.php';?>
<script>
$(document).ready(function(){
	var plot1 = $.jqplot ('chart1', [[3,7,9,1,5,3,8,2,5],[3,7,5,1,5,6,8,3,5]],{
		seriesDefaults: {
			rendererOptions: {
				smooth: true
			}
		}
	});
	//collapse
	$(".toggle-height").click(function(){
		var wiget = $(this).parent().parent();
		var self = $(this);
		var widgetMinimisable = wiget.find(".wiget-minimisable");
		var c = Number(widgetMinimisable.attr('collapsed'));
		var h,pic;

		wiget.height(wiget.height());
		widgetMinimisable.show();

		if(c){
			h = wiget.height() + widgetMinimisable.height();
			c = Number(!c);
			pic = "/minimise.png";
		}else{
			h = wiget.height() - widgetMinimisable.height();
			c = Number(!c);
			pic = "/maximise.png";
		}
		wiget.animate({height:h},"fast",function(){
			widgetMinimisable.attr('collapsed', c);
			self.css('background-image','url("<?php echo META_URL; ?>/pic'+pic+'")');
		});
	});
	//tab
	$(".wiget-tab li").click(function(){
		var pos,contents, tabs;
		tabs = $(this).parent().find("li");
		tabs.removeClass("active");
		$(this).addClass("active");
		for(i=0;i<tabs.length;i++){
			if(tabs.eq(i).hasClass("active")){
				pos = i;
				break;
			}
		}
		contents = $(this).parent().parent().find(".wiget-switchable ul");
		contents.hide();
		contents.eq(pos).show();
	});
});	
</script>

</body>
</html>